<!--  -->
<template>
  <div class="ball-point">
    <el-button @click="resetData">重置落点</el-button>
    <div class="court" @click="clickPoint($event)">
      <div class="middle-line"></div>
      <div class="left-line"></div>
      <div class="right-line"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ball-point",
  data() {
    return {
      ballPoint: [],
    };
  },
  methods: {
    resetData() {
      let court = document.getElementsByClassName("court")[0];
      for (var i = 0; i < this.ballPoint.length; i++) {
        court.removeChild(this.ballPoint[i]);
      }
      this.ballPoint = [];
      sessionStorage.setItem("point", JSON.stringify(this.ballPoint));
    },
    clickPoint(e) {
      // 获取起始坐标位置x
      let p2 = document.createElement("div");
      p2.className = "point";
      p2.style.position = "absolute";
      p2.style.width = "30px";
      p2.style.height = "30px";
      p2.style.backgroundColor = "black";
      p2.style.left = e.offsetX - 15 + "px";
      p2.style.top = e.offsetY - 15 + "px";
      p2.style.borderRadius = "50%";
      let court = document.getElementsByClassName("court")[0];
      court.appendChild(p2);
      this.ballPoint.push(p2);
    },
  },
};
</script>

<style scoped lang="less">
.ball-point {
  height: 100%;
  margin: 0 auto;
  text-align: center;
  .court {
    height: 600px;
    width: 1200px;
    margin: 10px auto;
    border: 5px solid black;
    position: relative;

    .middle-line {
      position: absolute;
      top: 0;
      left: 50%;
      width: 5px;
      height: 100%;
      background-color: black;
    }

    .left-line {
      position: absolute;
      top: 0;
      left: 400px;
      width: 5px;
      height: 100%;
      background-color: black;
    }

    .right-line {
      position: absolute;
      top: 0;
      right: 400px;
      width: 5px;
      height: 100%;
      background-color: black;
    }
  }
}
</style>
